<template>
	<view class="container">
		<!-- 详情 -->
		<!-- 基本信息 -->
		<uni-card thumbnail="" note="Tips">
			<template slot="title">
				<view><uni-section class="mb-10" title="基本信息" type="line"></uni-section></view>
			</template>
			<u-steps direction="column">
				<u-steps-item title="公司名称">
					<template slot="desc">
						<div>{{datalist.company}}</div>
					</template>
					<text class="slot-icon" slot="icon">
						<u-icon name="clock-fill"></u-icon>
					</text>
				</u-steps-item>
				<u-steps-item title="申报人">
					<template slot="desc">
						<div>{{datalist.apply_by}}</div>
					</template>
					<text class="slot-icon" slot="icon">
						<u-icon name="account-fill"></u-icon>
					</text>
				</u-steps-item>
				<u-steps-item title="申报时间">
					<template slot="desc">
						<div>{{datalist.add_time}}</div>
					</template>
					<text class="slot-icon" slot="icon">
						<u-icon name="clock-fill"></u-icon>
					</text>
				</u-steps-item>

				<!-- <u-steps-item title="地址">
					<template slot="desc">
						<div>{{datalist.apply_address}}</div>
					</template>
					<text class="slot-icon" slot="icon">
						<u-icon name="map-fill"></u-icon>
					</text>
				</u-steps-item> -->
				<u-steps-item title="手机号">
					<template slot="desc">
						<div>{{datalist.apply_phone}}</div>
					</template>
					<text class="slot-icon" slot="icon">
						<u-icon name="phone-fill"></u-icon>
					</text>
				</u-steps-item>
				<u-steps-item v-if="datalist.pass_flag==2" class="reason" title="未通过原因">
					<template slot="desc">
						<div>{{datalist.reason}}</div>
					</template>
					<text class="slot-icon" slot="icon">
						<u-icon color="red" name="error-circle-fill"></u-icon>
					</text>
				</u-steps-item>
			</u-steps>
		</uni-card>
		<!-- 订单信息 -->
		<uni-card thumbnail="" note="Tips">
			<template slot="title">
				<view><uni-section class="mb-10" title="资料" type="line"></uni-section></view>
			</template>
			<u-steps direction="column">

				<u-steps-item title="营业执照">
					<text class="slot-icon" slot="icon">
						<u-icon name="calendar-fill"></u-icon>
					</text>
					<template slot="desc">
						<!-- <uni-file-picker limit="2" file-mediatype="all" title="最多选择2个文件"></uni-file-picker> -->
						<u-upload :fileList="documentArray[0].data" name="1" :deletable="false"
							:maxCount="2"></u-upload>
					</template>
				</u-steps-item>
				<u-steps-item title="身份证(法人身份证)">
					<text class="slot-icon" slot="icon">
						<u-icon name="coupon-fill"></u-icon>
					</text>
					<template slot="desc">
						<!-- <uni-file-picker limit="2" file-mediatype="all" title="最多选择2个文件"></uni-file-picker>
						 -->
						<u-upload :fileList="documentArray[1].data" name="1" :deletable="false"
							:maxCount="2"></u-upload>
					</template>
				</u-steps-item><u-steps-item title="授权委托书">
					<text class="slot-icon" slot="icon">
						<u-icon name="order"></u-icon>
					</text>
					<template slot="desc">
						<!-- <uni-file-picker limit="2" file-mediatype="all" title="最多选择2个文件"></uni-file-picker> -->
						<u-upload :fileList="documentArray[2].data" name="1" :deletable="false"
							:maxCount="2"></u-upload>
					</template>
				</u-steps-item>
				<u-steps-item title="岚县经开区供水中心报装申请表">
					<text class="slot-icon" slot="icon">
						<u-icon name="file-text-fill"></u-icon>
					</text>
					<template slot="desc">
						<!-- <uni-file-picker limit="5" file-mediatype="all" title="最多选择5个文件"></uni-file-picker> -->
						<u-upload :fileList="documentArray[3].data" name="1" :deletable="false"
							:maxCount="2"></u-upload>
					</template>
				</u-steps-item>
				<u-steps-item title="合法持有土地的证明性文件复印件">
					<text class="slot-icon" slot="icon">
						<u-icon name="bookmark-fill"></u-icon>
					</text>
					<template slot="desc">
						<!-- <uni-file-picker limit="5" file-mediatype="all" title="最多选择5个文件"></uni-file-picker>
						 -->
						<u-upload :fileList="documentArray[4].data" name="1" :deletable="false"
							:maxCount="10"></u-upload>
					</template>
				</u-steps-item>
			</u-steps>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist: null,
				// 图片回显
				documentArray: [{
						data: []
					},
					{
						data: []
					},
					{
						data: []
					},
					{
						data: []
					}, {
						data: []
					},
				],
			}
		},
		/**
		 * @param {Object} data
		 * 页面加载完成的时候，拿到传递过来的参数 
		 */
		onLoad(data) {
			let that = this
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
					console.log('acceptDataFromOpenerPage', data)
					that.datalist = data
					that.documentArray[0].data = that.dataChange(that.datalist.business_license)
					that.documentArray[1].data = that.dataChange(that.datalist.id_card)
					that.documentArray[2].data = that.dataChange(that.datalist.power_of_attorney)
					that.documentArray[3].data = that.dataChange(that.datalist.apply_table)
					that.documentArray[4].data = that.dataChange(that.datalist.documentation)
				}),
				eventChannel.on('isUser', function(data) {
					console.log('isUser', data)
				})
		},
		methods: {
			// 将返回来的数据做处理
			dataChange(item) {
				let list = []
				let array = item.split(',')
				array.forEach(item => {
					list.push({
						url: `https://lxsw.pcippc.com/api${item}`
					})
				})
				console.log('list', list)
				return list
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: #f4f4f5;
		display: inline-block;
	}

	.workOrder {
		.workOrder_item {
			display: flex;
			justify-items: center;

			:nth-child(1) {
				font-weight: 500;
				margin-right: 10rpx;
			}

			:nth-child(2) {
				color: #9d9d9d;
			}
		}
	}

	// .slot-icon {
	// 	width: 21px;
	// 	height: 21px;
	// 	background-color: $u-warning;
	// 	border-radius: 100px;
	// 	font-size: 12px;
	// 	color: #fff;
	// 	line-height: 21px;
	// 	text-align: center;
	// }

	/deep/ .u-steps-item__line {
		height: 0% !important;
	}

	.reason {
		color: red;
	}

	/deep/ .reason .u-steps-item__content>.u-text>.u-text__value {
		color: red !important;
	}

	/deep/.u-upload__button {
		display: none !important;
	}
</style>